<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    append-to-body
    :modal="false"
    top="74px"
    class="container-dailog transition-box"
    :class="$store.state.app.sidebar.opened ? 'openSidebar' : 'hideSidebar'"
  >
    <div>
      <div>
        <el-tabs v-model="tabActiveName">
          <el-tab-pane label="网关信息" name="detail">
            <div class="border padding-tb-10 padding-lr-20 bg-gray">
              <div class="margin-right-20">
                <label class="font-16">网关信息</label>
              </div>
              <div class="margin-top-10 width-all flex">
                <div
                  class="newdevInfoBoxLeftPic border flex margin-right-20 relative"
                >
                  <img
                    src="https://ucloud-web-sh.oss-cn-shanghai.aliyuncs.com/cloud/web/prod/model/1677738147738_0312.png"
                    class="deviceImg block"
                  />
                  <div class="parameter_off_img absolute">
                    <span class="text text-10 block relative"
                      ><span>参数锁已关闭</span></span
                    >
                  </div>
                </div>
                <div class="devInfoBoxList" style="width: 200px">
                  <p class="margin-bottom-10">
                    <label class="status-label">状态:</label>
                    <el-tag> {{ form.gatewayStatus===0?'在线':'离线' }} </el-tag>

                  </p>
                  <p class="margin-bottom-10">
                    <label class="status-label">信号强度:</label>
                    <span>  </span>
                  </p>
                </div>
                <div class="justify-around flex flex-1 border-left">
                  <div class="devInfoBoxContent">
                    <div class="devInfoBoxList">
                      <p class="margin-bottom-10">
                        <label>名称:</label>
                        {{ form.gatewayName }}
                      </p>
                      <p class="margin-bottom-10">
                        <label>SN:</label>
                        {{ form.sn }}
                      </p>
                      <p class="margin-bottom-10">
                        <label>出厂固件:</label>
                        --
                      </p>
                      <p class="margin-bottom-10">
                        <label>网络制式:</label>
                      </p>
                    </div>
                  </div>
                  <div class="devInfoBoxContent">
                    <div class="devInfoBoxList">
                      <p class="margin-bottom-10">
                        <label>网关型号:</label>
                        {{ form.gatewayModel }}
                      </p>
                      <p class="margin-bottom-10">
                        <label>IMEI:</label>
                        {{ form.imei }}
                      </p>
                      <p class="margin-bottom-10">
                        <label>固件版本:</label>
                        {{ form.firmwareVersion }}
                      </p>
                      <p class="margin-bottom-10">
                        <label>心跳数据:</label>
                        {{ form.heartBeatStr }}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="margin-tb-10">
                <!-- <el-button type="primary" size="small">重启网关</el-button>
                <el-dropdown>
                  <el-button type="primary" size="small" class="margin-left-10">
                    更多<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>编辑</el-dropdown-item>
                    <el-dropdown-item>转移网关</el-dropdown-item>
                    <el-dropdown-item>删除网关</el-dropdown-item>
                    <el-dropdown-item>在离线记录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown> -->
              </div>
            </div>
            <div class="margin-top-20">
              <div>
                <label class="text-16">参数信息</label>
                <div class="flex align-center margin-top-10 text-12">
                  <span class="text-bold margin-right-20">网关参数锁:</span>
                  <el-switch></el-switch>
                </div>
                <div class="margin-top-10">
                  温馨提示：该开关开启后，网关上电联网时以该网关的云端参数表锁定参数，无法从串口进行有效修改，可以提高网关运行稳定性和安全性，该开关可在网关上线时进行操作。
                </div>
                <div class="margin-top-10">
                  <span class="text-bold margin-right-20">更新时间:</span
                  >2024-04-03 10:36:43
                </div>
              </div>
              <div class="margin-top-20 flex">
                <el-tabs tab-position="left" class="catalog-list">
                  <el-tab-pane label="串口参数"></el-tab-pane>
                  <el-tab-pane label="系统参数"></el-tab-pane>
                  <el-tab-pane label="APN参数"></el-tab-pane>
                </el-tabs>
                <div class="parameter-list flex-1">
                  <div class="bg-gray border">
                    <div class="parameter-content">
                      <div
                        class="flex border-bottom padding-bottom-20 margin-bottom-20"
                      >
                        <label>选择工作模式：</label>
                        <p>网络透传模式</p>
                      </div>
                      <div class="flex padding-bottom-10 margin-bottom-10">
                        <label>连接服务器A：</label>
                        <p>开</p>
                      </div>
                      <div class="flex padding-bottom-10 margin-bottom-10">
                        <label>SocketA地址：</label>
                        <p>socket.usr.cn</p>
                      </div>
                      <div
                        class="flex border-bottom padding-bottom-20 margin-bottom-20"
                      >
                        <label>SocketA端口：</label>
                        <p>2317</p>
                      </div>
                      <div class="flex padding-bottom-10 margin-bottom-10">
                        <label>SocketA连接类型：</label>
                        <p>TCP</p>
                      </div>
                      <div class="flex padding-bottom-10 margin-bottom-10">
                        <label>长短连接：</label>
                        <p>长连接</p>
                      </div>
                      <div class="flex padding-bottom-10 margin-bottom-10">
                        <label>短连接超时时间：</label>
                        <p>5(s)</p>
                      </div>
                      <div
                        class="flex border-bottom padding-bottom-20 margin-bottom-20"
                      >
                        <label>SocketA重连间隔：</label>
                        <p>5(s)</p>
                      </div>
                      <div
                        class="flex border-bottom padding-bottom-20 margin-bottom-20"
                      >
                        <label>连接服务器B：</label>
                        <p>关</p>
                      </div>
                      <div class="flex padding-bottom-10 margin-bottom-10">
                        <label>心跳包使能：</label>
                        <p>关</p>
                      </div>
                      <div class="flex padding-bottom-10 margin-bottom-10">
                        <label>心跳时间：</label>
                        <p>30(s)</p>
                      </div>
                      <div class="flex padding-bottom-10 margin-bottom-10">
                        <label>心跳数据：</label>
                        <p>7777772E7573722E636E</p>
                      </div>
                      <div class="flex padding-bottom-10 margin-bottom-10">
                        <label>心跳发送方式：</label>
                        <p>向服务器发送心跳包</p>
                      </div>
                      <div
                        class="flex border-bottom padding-bottom-20 margin-bottom-20"
                      >
                        <label>心跳发送方式：</label>
                        <p>向服务器发送心跳包</p>
                      </div>
                      <div class="flex padding-bottom-10 margin-bottom-10">
                        <label>注册包使能：</label>
                        <p>关</p>
                      </div>
                      <div class="flex padding-bottom-10 margin-bottom-10">
                        <label>最大重连次数：</label>
                        <p>60</p>
                      </div>
                    </div>
                  </div>
                  <label class="text-16 margin-tb-20">串口参数</label>
                  <div class="bg-gray border">
                    <div class="parameter-content">
                      <div class="flex">
                        <label>最大重连次数：</label>
                        <p>60</p>
                      </div>
                    </div>
                  </div>
                  <div class="bg-gray border margin-top-20">
                    <div class="parameter-content">
                      <div class="flex">
                        <label>数据位：</label>
                        <p>8位</p>
                      </div>
                    </div>
                  </div>
                  <div class="bg-gray border margin-top-20">
                    <div class="parameter-content">
                      <div class="flex">
                        <label>停止位：</label>
                        <p>1位</p>
                      </div>
                    </div>
                  </div>
                  <div class="bg-gray border margin-top-20">
                    <div class="parameter-content">
                      <div class="flex">
                        <label>校验位：</label>
                        <p>NONE</p>
                      </div>
                    </div>
                  </div>
                  <div class="bg-gray border margin-top-20">
                    <div class="parameter-content">
                      <div class="flex">
                        <label>打包时间：</label>
                        <p>50</p>
                      </div>
                    </div>
                  </div>
                  <div class="bg-gray border margin-top-20">
                    <div class="parameter-content">
                      <div class="flex">
                        <label>打包长度：</label>
                        <p>1024</p>
                      </div>
                    </div>
                  </div>
                  <label class="text-16 margin-tb-20">系统参数</label>
                  <div class="bg-gray border">
                    <div class="parameter-content">
                      <div class="flex">
                        <label>指令回显：</label>
                        <p>开</p>
                      </div>
                    </div>
                  </div>
                  <div class="bg-gray border margin-top-20">
                    <div class="parameter-content">
                      <div class="flex">
                        <label>串口缓存机制使能：</label>
                        <p>开</p>
                      </div>
                    </div>
                  </div>
                  <div class="bg-gray border margin-top-20">
                    <div class="parameter-content">
                      <div class="flex">
                        <label>开机信息：</label>
                        <p>[USR-DR504]</p>
                      </div>
                    </div>
                  </div>
                  <div class="bg-gray border margin-top-20">
                    <div class="parameter-content">
                      <div class="flex">
                        <label>命令密码：</label>
                        <p>usr.cn</p>
                      </div>
                    </div>
                  </div>
                  <div class="bg-gray border margin-top-20">
                    <div class="parameter-content">
                      <div class="flex">
                        <label>无数据重启时间：</label>
                        <p>1800(s)</p>
                      </div>
                    </div>
                  </div>

                  <label class="text-16 margin-tb-20">APN参数</label>
                  <div class="bg-gray border">
                    <div class="parameter-content">
                      <div class="flex">
                        <label>APN模式：</label>
                        <p>auto</p>
                      </div>
                    </div>
                  </div>
                  <div class="bg-gray border margin-top-20">
                    <div class="parameter-content">
                      <div class="flex">
                        <label>APN名称：</label>
                        <p>internet</p>
                      </div>
                    </div>
                  </div>
                  <div class="bg-gray border margin-top-20">
                    <div class="parameter-content">
                      <div class="flex">
                        <label>APN用户：</label>
                        <p>apn_username</p>
                      </div>
                    </div>
                  </div>
                  <div class="bg-gray border margin-top-20">
                    <div class="parameter-content">
                      <div class="flex">
                        <label>APN密码：</label>
                        <p>apn_password</p>
                      </div>
                    </div>
                  </div>
                  <div class="bg-gray border margin-top-20">
                    <div class="parameter-content">
                      <div class="flex">
                        <label>鉴权方式：</label>
                        <p>NONE</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="定位轨迹" name="track">
            <div>
              <label>定位方式：</label
              ><span class="margin-right-20">自动定位</span
              ><el-button type="text" size="small">设置</el-button>
            </div>
            <div class="margin-top-10"><label>上报间隔：</label>1分</div>
            <div class="margin-top-20">
              <baidu-map
                class="map-container"
                :zoom="15"
                :center="mapObj.cneter"
                inertial-dragging
                :scroll-wheel-zoom="true"
              >
              </baidu-map>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      tabActiveName: "detail",
      // 表单参数
      form: {},
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // 地图参数
      mapObj: {
        cneter: null,
      },
    };
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        id: null,
        gatewayName: null,
        deptId: null,
        sn: null,
        imei: null,
        gatewayStatus: null,
        gatewayModel: null,
        firmwareVersion: null,
        iccid: null,
        locationType: null,
        addr: null,
        lng: null,
        lat: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.newdevInfoBoxLeftPic {
  width: 300px;
  height: 170px;
  .deviceImg {
    width: auto;
    height: auto;
    max-width: 300px;
    max-height: 168px;
    margin: auto;
  }
  .parameter_off_img {
    top: 0;
    background: url("../../../../assets/images/parameter_off.png") no-repeat 0 0;
    background-size: 100% 100%;
    background-position: 0 0;
  }
  .text {
    color: #fff;
    letter-spacing: 0;
    font-weight: 400;
    line-height: 26px;
    top: -2px;
  }
}
.catalog-list {
  width: 300px;
  display: inline-table;
  ::v-deep .el-tabs__nav-wrap::after,
  ::v-deep .el-tabs__active-bar.is-left {
    left: 0;
    right: auto;
  }
  ::v-deep .el-tabs__item {
    text-align: left;
  }
}
.parameter-content {
  padding: 20px 0 20px 200px;
  label {
    height: auto;
    width: 190px;
  }
  p {
    width: auto;
    max-width: 300px;
    display: block;
    word-break: break-all;
  }
}
.map-container {
  width: 100%;
  height: 650px;
}
</style>
